<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form"  :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="预约单号">
              <el-input v-model="form.orderSn" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="form.userName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="form.userPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约医院">
              <el-select v-model="form.hospitalId" placeholder="请选择">
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input v-model="form.projectName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目分类">
              <el-cascader v-model="cates" placeholder="请选择" :options="cateOption" change-on-select />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约状态">
              <el-select v-model="form.orderStatus" placeholder="请选择">
                <el-option
                  v-for="item in orderStaOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作人">
              <el-input v-model="form.adminName" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="预约来源">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in typeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="预约时间" width="236">
              <el-date-picker
                v-model="orderDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提交时间" width="236">
              <el-date-picker
                v-model="createDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- <el-form-item> -->
              <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
              <el-button
                v-if="hasPermission('AdminProjectOrderProjectProvider.appointmentOrderAdd')"
                type="primary"
                @click="toRoutes('subscribeFast')"
              >快速预约</el-button>
            <!-- </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="orderSn" label="预约单号" />
        <el-table-column label="用户信息">
          <template slot-scope="scope">
            <div>{{ scope.row.userName }}</div>
            <div>{{ scope.row.userPhone| phonereg }}</div>
          </template>
        </el-table-column>
        <el-table-column label="推荐人信息">
          <template slot-scope="scope">
            <div>{{ scope.row.serverName }}</div>
            <!-- <div v-else>{{scope.row.serverName}}</div> -->
            <div>{{ scope.row.serverPhone| phonereg }}</div>
          </template>
        </el-table-column>
        <el-table-column label="预约状态" width="120">
          <template slot-scope="scope">{{ scope.row.orderStatus | orderStatusType }}</template>
        </el-table-column>
        <el-table-column prop="orderDate" label="预约日期" />
        <el-table-column prop="identity" label="地区">
          <template slot-scope="scope">
            <div>
              {{ scope.row.provinceName }}
              {{ scope.row.cityName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="hospitalName" label="预约医院" />
        <el-table-column prop="projectName" label="预约项目" />
        <el-table-column prop="submitRemark" label="备注" width="120" />
        <el-table-column prop="adminName" label="操作人" />
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <div v-if="hasPermission('AdminProjectOrderProjectProvider.closeProjectOrderProject')">
              <el-button
                v-if="scope.row.orderStatus!='2'"
                type="text"
                size="small"
                @click="closeMake(scope.row.orderSn)"
              >关闭预约</el-button>
            </div>
            <el-button
              v-if="hasPermission('AdminProjectOrderProjectProvider.updateSubmitRemarkByOrderSn')"
              type="text"
              size="small"
              @click="noteEdit(scope.row.orderSn)"
            >修改备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 关闭预约弹窗 -->
      <el-dialog
        title="关闭预约"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="468px"
      >
        <!-- 输入框 -->
        <el-form :inline="true" label-width="80px" label-position="right">
          <span>此操作将关闭预约单，是否继续？</span>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取 消</el-button>
          <el-button type="primary" @click="addSubmit()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改备注弹窗 -->
      <el-dialog
        title="修改备注"
        :visible.sync="dialogVisible1"
        :before-close="handleClose1"
        width="468px"
      >
        <!-- 输入框 -->
        <el-form :inline="true" label-width="80px" label-position="right">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="remarkForm.submitRemark"
                class="textarea236"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose1()">取 消</el-button>
          <el-button type="primary" @click="addSubmit1()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="listForm.pageNum"
            :page-sizes="page_sizes"
            :page-size="listForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  findProjectAppointmentList,
  updateSubmitRemarkByOrderSn,
  closeProjectOrderProject,
  getAllBeautyCategoryList
} from '@/api/subscribePlatform'
import { hospitalDropDown } from '@/api/doctorManage'
import { findAllBeautyCategoryList } from '@/api/medicalClassifyList'
export default {
  name: 'SubPlatformIndex',
  filters: {
    cardType: function(e) {
      return window.helper.cardType(String(e))
    },
    orderStatusType(e) {
      return window.helper.orderStatusType(String(e))
    }
  },
  data() {
    return {
      val: '1',
      remarkForm: {
        orderSn: '',
        submitRemark: ''
      },
      officeOption: [],
      orderStaOption: [],
      closeMakeFrom: {
        id: null
      },
      typeOption: [],
      dialogVisible: false,
      dialogVisible1: false,
      tableLoading: true,
      dates: [],
      cates: [],
      orderDate: null,
      createDate: null,
      form: {
        orderSn: '',
        userName: '',
        userPhone: '',
        hospitalId: -1,
        projectName: '',
        cate: '',
        orderStatus: '',
        type: '',
        adminName:'',
        beginCreateDate: null,
        endCreateDate: null,
        beginOrderDate: null,
        endOrderDate: null,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      page_sizes: [10, 30, 50, 100],
      page_totals: 60,
      listForm: {
        pageNum: 1,
        pageSize: 10
      },
      cateOption: [
        {
          value: 0,
          label: '医美'
        },
        {
          value: 1,
          label: '口腔管理'
        },
        {
          value: 2,
          label: '健康管理'
        }
      ]
    }
  },
  inject: ['reload'],
  mounted() {
    this.getList(this.listForm)
    // 获取对应的options
    this.getOption()
    // 获取对应分类
    if (this.cateFn('0') != []) {
      this.cateOption[0]['children'] = this.cateFn('0')
    }
    if (this.cateFn('1') != []) {
      this.cateOption[1]['children'] = this.cateFn('1')
    }
    if (this.cateFn('2') != []) {
      this.cateOption[2]['children'] = this.cateFn('2')
    }
  },
  methods: {
    // 按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e)
    },
    // 获取分类
    cateFn(e) {
      const datas = {
        plate: e
      }
      const newArr = []
      getAllBeautyCategoryList(datas).then(res => {
        // console.log(res)
        const resData = res.data.data.list
        if (resData != []) {
          resData.forEach((item1, index) => {
            newArr.push({
              value: item1.id,
              label: item1.name
            })
            if (item1.children != null) {
              newArr[index]['children'] = []
              item1.children.forEach((item2, i) => {
                newArr[index]['children'].push({
                  value: item2.id,
                  label: item2.name
                })
                if (item2.children != null) {
                  newArr[index]['children'][i]['children'] = []
                  item2.children.forEach(item3 => {
                    newArr[index]['children'][i]['children'].push({
                      value: item3.id,
                      label: item3.name
                    })
                  })
                }
              })
            }
          })
        }
      })
      return newArr
    },
    getOption() {
      // 医院列表
      hospitalDropDown().then(res => {
        const resData = res.data.data
        const newData = []
        resData.forEach(e => {
          newData.push({
            value: e.id + '',
            label: e.name
          })
        })
        this.officeOption = newData
        this.officeOption.unshift({
            value: -1,
            label: '全部'
        })
        // console.log(this.officeOption)
      })
      // 获取预约状态
      this.orderStaOption = window.helper.orderStatusType('listReturn')
      this.orderStaOption.unshift({
        value: '',
        label: '全部'
      })
      // 预约来源
      this.typeOption = window.helper.orderType('listReturn')
    },
    // 成功状态弹窗
    succStatus(txt) {
      this.$message({
        message: txt + '成功',
        type: 'success'
      })
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.$message.error(txt + '失败')
    },
    // 列表数据获取
    getList(e) {
      this.tableLoading = true
      const datas = {...e}
      if(datas.orderStatus!=undefined){
          datas.orderStatus = String(datas.orderStatus)
      }
      if(datas.cates!=undefined){
          datas.cate = String(datas.cates)
      }
      findProjectAppointmentList(datas)
        .then(res => {
          if (!res.data.code) {
            // console.log(res)
               console.log( res.data)
            this.tableData = res.data.data.list;
            this.page_totals = res.data.data.count;
          } else {
            this.$message.error(res.data.msg)
          }
          this.tableLoading = false
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    // 查询
    searchFn() {
      this.form.pageNum = 1
      if (this.orderDate != null) {
        if (this.orderDate.length) {
          this.form.beginOrderDate = this.orderDate[0]
          this.form.endOrderDate = this.orderDate[1]
        }
      } else {
        this.form.beginOrderDate = null
        this.form.endOrderDate = null
      }
      if (this.createDate != null) {
        if (this.createDate.length) {
          this.form.beginCreateDate = this.createDate[0]
          this.form.endCreateDate = this.createDate[1]
        }
      } else {
        this.form.beginCreateDate = null
        this.form.endCreateDate = null
      }
      if (this.cates.length > 0) {
        this.form['cates'] = String(this.cates[this.cates.length - 1])
      }
      const obform = { ...this.form }
      obform.hospitalId = Number(obform.hospitalId)
      console.log(JSON.stringify(this.form))
      console.log(this.form)
      this.getList(this.form)
    },
    // 账号状态修改
    swithFn(userId, status) {
      const datas = { userId, status }
      updateStatus(datas)
        .then(res => {
          if (!res.data.code) {
            this.succStatus('修改')
            this.getList(this.listForm)
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    // 关闭预约弹窗
    handleClose() {
      this.dialogVisible = false
      // this.$refs["addForm1"].resetFields();
    },
    addSubmit() {
      // console.log("提交了")
      const datas = this.closeMakeFrom
      closeProjectOrderProject(datas)
        .then(res => {
          if (!res.data.code) {
            this.succStatus('关闭')
            this.getList(this.listForm)
            this.reload()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
      this.dialogVisible = false
    },
    closeMake(e) {
      this.closeMakeFrom.id = e
      console.log(e)
      this.dialogVisible = true
    },
    // 修改备注弹窗
    handleClose1() {
      this.remarkForm = {
        orderSn: '',
        submitRemark: ''
      }
      this.dialogVisible1 = false
      // this.$refs["addForm1"].resetFields();
    },
    addSubmit1() {
      // console.log("提交了")
      const datas = this.remarkForm
      updateSubmitRemarkByOrderSn(datas)
        .then(res => {
          if (!res.data.code) {
            this.succStatus('修改')
            this.getList(this.listForm)
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
      this.remarkForm = {
        orderSn: '',
        submitRemark: ''
      }
      this.dialogVisible1 = false
    },
    noteEdit(e) {
      console.log(e)
      this.remarkForm.orderSn = e
      // console.log(this.remarkForm)
      this.dialogVisible1 = true
    },
    // 路由跳转
    toRoutes(e, userId) {
      const route = { name: e, query: { userId: userId }}
      this.$router.push(route)
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList(this.form)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getList(this.form)
    }
  }
}
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>
